<template>
  <div class="container" :data="image_info">
    <div class="detail_img">
      <img class="detail_image" :src="image_info.url" alt="" />
    </div>

    <div class="comment">
      <el-col
        v-for="item in comment_list"
        :key="item.id"
        width="100%"
        style="margin-bottom: 10px;"
      >
        <el-card shadow="hover" :body-style="{ padding: '0px' }">
          <div style="padding: 14px;">
            <span>用户：{{ item.user_id.username }}</span>
            <div class="bottom clearfix">
              <time class="time">{{ item.message }}</time>
            </div>
            <div style="float: right; margin-bottom: 10px;">
              <span>{{ formatTime(item.time) }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-input
        type="textarea"
        :rows="5"
        placeholder="输入留言"
        v-model="message"
        style="margin-top: 30px"
      >
      </el-input>
      <div class="until">
        <el-button type="primary" @click="add_comment">添加留言</el-button>

        <el-tooltip
          class="item"
          effect="dark"
          content="点击添加收藏"
          placement="bottom"
          v-if="!collection_status"
        >
          <el-button
            icon="el-icon-star-off"
            circle
            @click.native="modify_collection"
          ></el-button>
        </el-tooltip>

        <el-tooltip
          class="item"
          effect="dark"
          content="点击取消收藏"
          placement="bottom"
          v-if="collection_status"
        >
          <el-button
            icon="el-icon-star-off"
            circle
            type="success"
            @click.native="modify_collection"
          ></el-button>
        </el-tooltip>

        <el-tooltip
          class="item"
          effect="dark"
          content="点击分享"
          placement="bottom"
        >
          <el-button icon="el-icon-share" circle @click="shareToQQ"></el-button>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>

<script>
import request from "../../request";
export default {
  name: "image_detail",
  data() {
    return {
      image_info: "",
      comment_list: [],
      message: "",
      userinfo: "",
      collection_status: false,
      id: "",
    };
  },
  methods: {
    get_userinfo() {
      this.userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
    },
    get_image(id) {
      request({
        url: "/works/get-works-by-id/",
        params: {
          id: id,
        },
      })
        .then((res) => {
          this.image_info = res.data;
        })
        .catch((err) => {
          this.$message.error("请求失败");
        });
    },
    get_comment(id) {
      request({
        url: "/works/get-works-comment/",
        params: {
          id: id,
        },
      })
        .then((res) => {
          this.comment_list = res.data;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    modify_collection() {
      request({
        url: "/works/modify-collection/",
        params: {
          id: this.$route.params.id,
          user_id: this.userinfo.id,
          status: !this.collection_status ? 1 : 0,
        },
      })
        .then((res) => {
          this.get_collection();
        })
        .catch((err) => {});
    },
    get_collection() {
      request({
        url: "/works/get-works-collection/",
        params: {
          id: this.$route.params.id,
          user_id: this.userinfo.id,
        },
      })
        .then((res) => {
          if (res.data[0].status == 0) {
            this.collection_status = false;
          } else {
            this.collection_status = true;
          }
        })
        .catch((err) => {});
    },
    add_comment() {
      if (this.message) {
        request({
          url: "/works/add-comment/",
          params: {
            id: this.$route.params.id,
            user_id: this.userinfo.id,
            message: this.message,
          },
        })
          .then((res) => {
            this.$message.success(res.message);
            this.get_comment(this.$route.params.id);
            this.message = "";
          })
          .catch((err) => {
            this.$message.error(err);
          });
      } else {
        this.$message.error("请先填写留言");
      }
    },
    shareToQQ() {
      //此处分享链接内无法携带图片
      const share = {
        share_url: window.location.href,
      };
      location.replace(
        "https://connect.qq.com/widget/shareqq/index.html?url=" +
          encodeURIComponent(share.share_url)
      );
    },
    formatTime(date) {
      var json_date = new Date(date);
      var ysar = json_date.getFullYear();
      var month = json_date.getMonth() + 1;
      var day = json_date.getDate();
      var hours = json_date.getHours();
      var minutes = json_date.getMinutes();
      if (month < 10) {
        month = "0" + String(month);
      }
      if (day < 10) {
        day = "0" + String(day);
      }
      if (hours < 10) {
        hours = "0" + String(hours);
      }
      if (minutes < 10) {
        minutes = "0" + String(minutes);
      }
      var datetime =
        ysar + "-" + month + "-" + day + " " + hours + ":" + minutes;
      return datetime;
    },
  },
  created() {
    this.get_userinfo();
    this.get_image(this.$route.params.id);
    this.get_comment(this.$route.params.id);
    this.get_collection();
  },
  mounted() {
    // console.log(this.$route.params.id);
    this.get_image(this.$route.params.id);
  },
  watch: {
    $route() {
      this.id = this.$route.params.id; //获取传来的参数
      this.get_image(this.$route.params.id); //路由变化时就重新执行这个方法 更新传来的参数
    },
  },
};
</script>

<style>
.detail_img {
  width: 660px;
  margin: auto;
  text-align: center;
}
.detail_image {
  max-width: 660px;
  max-height: 480px;
  margin-top: 50px;
}

.comment {
  width: 660px;
  margin: auto;
  margin-top: 100px;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin: 13px 0;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.until {
  float: right;
  margin-top: 10px;
}
</style>
